<template>
    <div class="container">
        <!-- 显示时间 -->
        <div class="timer">
            <span class="hour">{{ counth }}</span>
            <span>:</span>
            <span class="minute">{{ countm }}</span>
            <span>:</span>
            <span class="second">{{ counts }}</span>
        </div>
        <!-- 控制器 -->
        <div class="controls">
            <div>
                <el-button class="fa kaishi" @click="likai" v-if="kaishi">开始</el-button>
            </div>
            <div>
                <el-button class="fa fa-pause" @click="pause" v-if="paus">暂停</el-button>
            </div>
            <div>
                <el-button class="fa fa-play" @click="play" v-if="pla">停止</el-button>
            </div>
            <div>
<!--                <el-button class="fa fa-edit" v-if="edit" @click="editt">编辑</el-button>-->
                <el-button class="fa fa-check" v-if="check" @click="checkk">确认</el-button>
                <el-button class="fa fa-close" v-if="close" @click="closee">取消</el-button>
            </div>
        </div>

        <!-- 修改时间 -->
        <div class="input" v-if="inputt">
            <el-input type="number" min="1" v-model.lazy="daojishi" class="long-input" />
        </div>
        <!-- 倒计时结束后播放音频 -->
        <audio src="https://gulimall-chengke123.oss-accelerate.aliyuncs.com/590726520d302164e41ca5117a86e5f84cf01b22dcd9790d2187e559c960d652.mp3" id="audio" loop>
                    您的浏览器不支持"aubio "标记
        </audio>
    </div>
</template>

<script>
import { createFocusDuration } from "@/view/article/api";

export default {
    name: 'PomodoroComponent',
    props: {
        initialTime: {
            type: Number,
            default: 24 // 默认值为24分钟
        }
    },
    data() {
        return {
            daojishi: this.initialTime,
            secondes: '',
            countm: '00',
            counts: '00',
            counth: '00',
            pausee: true,
            // 控制按钮显示与隐藏
            kaishi: true,
            edit: true,
            paus: false,
            pla: false,
            check: false,
            close: false,
            inputt: false
        };
    },
    methods: {
        // 倒计时的实现
      likai() {
        if (this.pausee === true) {
          this.secondes = this.daojishi * 60;
        }
        this.pausee = true;
        var aet = setInterval(() => {
          this.secondes--;
          let h = parseInt(this.secondes / 3600);
          h = h < 10 ? '0' + h : h;
          let m = parseInt(this.secondes / 60 % 60);
          m = m < 10 ? '0' + m : m;
          let s = parseInt(this.secondes % 60);
          s = s < 10 ? '0' + s : s;
          this.counth = h;
          this.countm = m;
          this.counts = s;
          if (this.counth === '00' && this.countm === '00' && this.counts === '00') {
            clearInterval(aet);
            this.counth = '00';
            this.countm = '00';
            this.counts = '00';
            this.kaishi = true; // 重置开始按钮状态
            this.edit = true; // 重置编辑按钮状态
            this.inputt = false; // 关闭输入框
            this.close = false; // 关闭取消按钮
            // 发起请求给后端保存用户专注时长
            this.saveFocusDuration();
            // 播放音频
            this.playAudio();
            // 3秒后停止播放
            setTimeout(() => {
              this.stopAudio();
            }, 3000);
          }
          if (this.pausee === false) {
            clearInterval(aet);
          }
        }, 1000);

        if (this.kaishi === true) {
          this.paus = true;
          this.pla = true;
          this.kaishi = false;
          this.edit = false;
        }
      },
      stopAudio() {
        var audio = document.getElementById('audio');
        audio.pause();
      },
      playAudio() {
        var audio = document.getElementById('audio');
        audio.play();
      },
        play() {
            if (this.pausee === false) {
                this.pausee = true;
                this.counth = '00';
                this.countm = '00';
                this.counts = '00';
            }
            this.secondes = 1;

            this.pla = false;
            this.paus = false;
            this.kaishi = true;
            this.edit = true;
        },
        pause() {
            this.pausee = false;

            this.kaishi = true;
            this.edit = true;
            this.paus = false;
        },
        editt() {
            this.paus = false;
            this.pla = false;
            this.kaishi = false;
            this.edit = false;
            this.inputt = true;
            this.check = true;
            this.close = true;
        },
        checkk() {
            this.kaishi = true;
            this.edit = true;
            this.inputt = false;
            this.check = false;
            this.close = false;
            this.counth = '' + this.daojishi;
            this.countm = '00';
            this.counts = '00';
            // 发起请求给后端保存用户专注时长
            this.saveFocusDuration();
        },
        closee() {
            this.kaishi = true;
            this.edit = true;
            this.inputt = false;
            this.check = false;
            this.close = false;
        },
        saveFocusDuration() {
            createFocusDuration({ duration: this.daojishi }).then(res => {
                console.log(res)
            }).catch(err => {
                console.log(err)
            })
        }
    }
};
</script>

<style scoped>
.long-input {
    width: 150px; /* 根据需要调整宽度 */
}
body {
    margin: 0;
    padding: 0;
    height: 40%;
    width: 40%;
    background: rgb(0, 0, 0);
}

.container {
    width: 150px;
    height: 100px;
    margin-left: 30%; /* 调整左边距 */
    margin-top: 50px; /* 调整上边距 */
}

.timer {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: red;
    font-size: 50px; /* 减小字体大小 */
    font-weight: 500;
    white-space: nowrap; /* 不换行 */
}

.timer span {
    display: inline-block; /* 让每个 span 元素在同一行显示 */
    margin: 0 5px; /* 添加间距 */
}

.controls {
    display: flex;
    margin-left: 80px;
}

.fa {
    margin-left: 30px;
}

.input {
    margin-left: 100px;
}
</style>
